<template>
  <div class="mod-config" style="padding-bottom: 10px;">
    <div class="app-title">
      <div style="float:left;padding: 10px;">{{title}} <a style="font-size: 12px" href="/html/codeHelper.html">操作说明</a></div>
      <img class="avatar" :src="userInfo.avatar+'_60x60q90.jpg'" /><span style="font-size: 14px"> 你好， {{userInfo.realName}} </span>
    </div>

    <div style="margin-top: 50px;">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" style="padding: 15px;  position: -webkit-sticky; z-index: 1; position: sticky; top: 50px; background-color: white;">
      <el-form-item>
        <el-input style="width:160px;" v-model="dataForm.key" placeholder="输入名称或者编码" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query()">查询</el-button>
        <el-button v-if="userInfo.roleIdList && userInfo.roleIdList.some((x,y,z)=>x==1)" type="primary" @click="jumpPc()">管理</el-button>
        <a style="margin-left: 10px;" href="/proxyApi/generator/thing/export" target="_blank">导出</a>
      </el-form-item>
    </el-form>

    <div class="infinite-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
      <div class="infinite-list-item" v-for="(item,index) in dataList">
        <span style="width: 28%;">{{item.code}}</span>
        <span style="width: 72%;">{{item.name}}</span>
      </div>
    </div>
    <div class="center" v-show="loading">加载中</div>
    </div>
  </div>
</template>

<script>
  import dingMixin from  '@/mixins/ding'
  import * as dd from 'dingtalk-jsapi'

  export default {
    data () {
      return {
        title: '物品编码查询 V1.0',
        dataForm: {
          key: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 15,
        totalPage: 0,
        loading : false,
        noMore : false,
        busy: false
      }
    },
    mixins: [dingMixin],
    beforeMount () {
      if (dd.env.platform!="notInDingTalk") {
        if(this.userInfo.dingId && this.dingConfig.corpId && this.$cookie.get('token')>'') {
          return;
        }
        this.getDingConfig().then(config =>{
            this.dingConfig = config;
            this.dingLogin(config.corpId, null);
        })
      }
    },
    activated () {
      //this.getDataList()
    },
    methods: {
      jumpPc(){
        this.$router.push({name: 'generator-thing'});
      },
      // 获取数据列表
      loadMore () {
        if(!this.noMore){
          this.pageIndex ++;
          let oldList = this.dataList;
          this.getDataList(oldList);
        }
      },
      query(){
        this.pageIndex = 1;
        this.noMore = false;
        this.getDataList();
      },
      getDataList (oldList=[]) {
        this.loading = true;
        this.busy = true;
        this.$http({
          url: this.$http.adornUrl('/generator/thing/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'key': this.dataForm.key
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = oldList.concat(data.page.list)
            this.totalPage = data.page.totalCount
            if(data.page.list.length < this.pageSize){
              console.log("ajax end no more");
              this.noMore = true;
            }
          } else {
            this.dataList = oldList
            this.totalPage = 0
            this.noMore = true;
          }
          this.busy = false;
        }
        ).catch(error=>{
          console.info(error)
        })

        this.loading = false;
      }
    }
  }
</script>
<style scoped>
  .app-title {
    z-index: 99999;
    background: white;
    position: fixed;
    width:100%;
    top:0px;
    left:0px;
    padding:5px 10px;
    height:50px;
    font-size: 18px;
    text-align: right;
    border-bottom: lightgray solid 1px;
  }
  .pj_container{
    margin-top: 50px;
  }

  .avatar{
    width: 36px;
    height: auto;
    margin-right: 15px;
    border-radius: 100%;
    vertical-align: middle;
  }

  .infinite-list{
    width:100%;
    height: calc(100vh - 180px);
    overflow-y: auto;
  }

  .infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    margin: 10px;
    border-bottom: 1px solid #ebeef5;
  }
  .infinite-list span{
    width:50%;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
    overflow: hidden;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .center{
    text-align: center;
  }
</style>
